<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限设置</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link href="../../layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="../../layuiadmin/style/admin.css" media="all" rel="stylesheet">
</head>
<body style="width: 100%; height: 100%;">

<form class="layui-form">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>基础设置-权限设置</legend>
            </fieldset>
            <table id="roletable" lay-filter="rolestable"></table>
            <div class="layui-form-item" style="margin-left: 13%">
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" id="rolename" lay-verify="required" placeholder="角色名"
                           type="text">
                </div>
                <button class="layui-btn" id="insertRole" lay-filter="saveRole" type="button" width="30">添加</button>
            </div>

        </div>
        <div class="layui-col-md3">
            <div id="menuTreeDiv">

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>权限设置-菜单权限</legend>
                </fieldset>
                <div class="demo-tree-more" id="menuTree"></div>
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-fluid" lay-demo="getChecked" type="button">保存菜单权限</button>
                </div>

            </div>
        </div>
        <div class="layui-col-md5">
            <div id="usersDiv">

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>权限设置-人员列表</legend>
                </fieldset>
                <div class="demo-transfer" id="usersShuttle"></div>
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-fluid" id='saveUsersRolesButton' lay-demotransferactive="getData"
                            type="button">保存人员权限
                    </button>
                </div>


            </div>
        </div>
    </div>
</form>

<script id="barDemo" type="text/html">
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm updateRole" lay-event="edit">编辑</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm deleteRole" lay-event="del">删除</button>
</script>
<script src="../../layuiadmin/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'tree', 'transfer', 'form'], function () {
        var $ = layui.$
            , table = layui.table
            , tree = layui.tree
            , util = layui.util
            , transfer = layui.transfer
            , form = layui.form
            , publicRoleId = '';
        $('#menuTreeDiv').hide();
        $('#usersDiv').hide();

        /**
         *表格
         */
        table.render({
            elem: '#roletable'
            , url: 'http://localhost:8086/selectRoleTable' //数据接口
            , cols: [
                [ //表头
                    {field: 'id', title: '编号', sort: true, fixed: 'left'}
                    , {field: 'name', title: '角色', sort: true, align: 'center'}
                    , {toolbar: '#barDemo', title: '操作', align: 'center'}
                ]
            ]
        });
        //添加
        $('#insertRole').on('click', function () {
            var list = [];
            var role = {};
            role.name = document.getElementById('rolename').value;
            list.push(role);
            $.ajax({
                url: 'http://localhost:8086/insertRole',
                type: 'post',
                data: JSON.stringify(list),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    if (result.data == 0) {
                        alert("添加失败！");
                    } else {
                        reloadRolesTable();
                    }
                }
            });
        });
        //监听工具条
        table.on('tool(rolestable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除' + data.name + '?', function (index) {
                    $.ajax({
                        url: 'http://localhost:8086/deleteRole',
                        type: 'post',
                        data: data.id,
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            layer.close(index);
                            if (result.code == 1) {
                                alert(result.msg);
                            } else {
                                reloadRolesTable();
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                $('#menuTreeDiv').show();
                $('#usersDiv').show();
                publicRoleId = data.id;

                /**
                 *树形
                 */
                $.post('http://localhost:8086/selectMenuTree?roleid=' + data.id, function (result) {
                    var res = eval('(' + result + ')');
                    tree.render({
                        elem: '#menuTree'
                        , data: res
                        , showCheckbox: true  //是否显示复选框
                        , id: 'menuTreeRender'
                    });
                });

                /**
                 *穿梭框
                 */
                $.post('http://localhost:8086/selectUsersShuttle', function (result) {
                    var res = eval('(' + result + ')');
                    var have = [];
                    for (var i = 0, l = res.length; i < l; i++) {
                        if (res[i].code == publicRoleId) {
                            have.push(res[i].value);
                        }
                    }
                    transfer.render({
                        elem: '#usersShuttle'
                        , data: res
                        , id: 'usersShuttle'
                        , title: ['未选择人员', '已选择人员']
                        , value: have
                    });
                });
            }
            ;
        });

        /**
         *保存菜单权限
         */
        util.event('lay-demo', {
            getChecked: function (othis) {
                var role = [];
                var menus = tree.getChecked('menuTreeRender');
                for (var i = 0, l = menus.length; i < l; i++) {
                    var ass = {};
                    ass.id = publicRoleId;
                    ass.menus = menus[i].id;
                    role.push(ass);
                    var sub = menus[i].children;
                    for (var j = 0, k = sub.length; j < k; j++) {
                        var as = {};
                        as.id = publicRoleId;
                        as.menus = sub[j].id;
                        role.push(as);
                    }
                }
                layer.confirm('确认保存？', function (index) {
                    $.ajax({
                        url: 'http://localhost:8086/insertRoleMenus',
                        type: 'post',
                        data: JSON.stringify(role),
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            layer.close(index);
                            if (result.data == 0) {
                                alert("保存失败")
                            }
                        }
                    });
                });
            }
        });

        /**
         *保存人员权限
         */
        $('#saveUsersRolesButton').on('click', function () {
            layer.confirm('确认保存？', function (index) {
                var datalist = [];
                var getData = transfer.getData('usersShuttle'); //获取右侧数据
                if (getData.length > 0) {
                    for (var i = 0, l = getData.length; i < l; i++) {
                        var list = {};
                        list.id = getData[i].value;
                        list.role = publicRoleId;
                        datalist.push(list);
                    }
                } else {
                    var list = {};
                    list.id = "0";
                    list.role = publicRoleId;
                    datalist.push(list);
                }
                $.ajax({
                    url: 'http://localhost:8086/updateUsersRole',
                    type: 'post',
                    data: JSON.stringify(datalist),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        layer.close(index);
                        if (result.data == 0) {
                            alert("保存失败");
                        }
                    }
                });
            });
        });

        /**
         *重新渲染
         */
        function reloadRolesTable() {
            table.reload('roletable', {
                url: 'http://localhost:8086/selectRoleTable'
            });
        }
    });
</script>
</body>
</html>